<template>
  <custom-modal-page :visible.sync="visible">
    <div
      class="flowPath-config-detail-container animate__faster animate__animated animate__fadeIn"
    >
      <div class="header" header="详情">
        <a-button class="back-button" @click="gotoBack()"> 返回 </a-button>
      </div>
      <div class="main" v-loading="loading">
        <a-form-model ref="form" :model="form">
          <a-collapse v-model="activeKey">
            <a-collapse-panel key="1" :show-arrow="false" title="配置信息">
              <template slot="header">
                <div class="collapse-custom-header">
                  {{ activeKey.includes("1") ? "收起" : "展开" }}
                  <div
                    class="icon"
                    :class="[activeKey.includes('1') && 'active']"
                  >
                    <bj-icon-font
                      type="xl"
                      color="#0068B7"
                      :size="10"
                    ></bj-icon-font>
                  </div>
                </div>
              </template>
              <div class="node-container">
                <a-row :gutter="0">
                  <a-col :span="8">
                    <!-- 项目名称 -->
                    <a-form-model-item label="项目名称">
                      <a-input v-model="form.proName" disabled />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="8">
                    <!-- 配置功能 -->
                    <a-form-model-item label="配置功能">
                      <a-input v-model="form.config" disabled />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="8">
                    <!-- 标段名称 -->
                    <a-form-model-item label="标段名称">
                      <a-input v-model="form.orgName" disabled />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
            </a-collapse-panel>
            <a-collapse-panel key="2" :show-arrow="false" title="节点信息">
              <template slot="header">
                <div class="collapse-custom-header">
                  {{ activeKey.includes("2") ? "收起" : "展开" }}
                  <div
                    class="icon"
                    :class="[activeKey.includes('2') && 'active']"
                  >
                    <bj-icon-font
                      type="xl"
                      color="#0068B7"
                      :size="10"
                    ></bj-icon-font>
                  </div>
                </div>
              </template>
              <div class="node-container">
                <a-row :gutter="0">
                  <a-col :span="8">
                    <!-- 节点名称 -->
                    <a-form-model-item label="节点名称">
                      <a-input v-model="form.name" disabled />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="8">
                    <!-- 前一个节点 -->
                    <a-form-model-item label="前一个节点">
                      <a-input v-model="form.prevnodeDesc" disabled />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="8">
                    <!-- 后一个节点 -->
                    <a-form-model-item label="后一个节点">
                      <a-input v-model="form.nextnodeDesc" disabled />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="8">
                    <!-- 打回节点 -->
                    <a-form-model-item label="打回节点">
                      <a-input v-model="form.backnodeDesc" disabled />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="8">
                    <!-- 节点类型 -->
                    <a-form-model-item label="节点类型">
                      <a-input v-model="form.nodetypeDesc" disabled />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="8">
                    <!-- 节点顺序 -->
                    <a-form-model-item label="节点顺序">
                      <a-input v-model="form.sort" disabled />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <!-- 备注 -->
                    <a-form-model-item label="备注">
                      <a-input
                        v-model="form.remark"
                        disabled
                        type="textarea"
                        :rows="4"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
            </a-collapse-panel>
            <a-collapse-panel key="3" :show-arrow="false" title="表单元素">
              <template slot="header">
                <div class="collapse-custom-header">
                  {{ activeKey.includes("3") ? "收起" : "展开" }}
                  <div
                    class="icon"
                    :class="[activeKey.includes('3') && 'active']"
                  >
                    <bj-icon-font
                      type="xl"
                      color="#0068B7"
                      :size="10"
                    ></bj-icon-font>
                  </div>
                </div>
              </template>
              <a-empty v-if="form.flowFormList.length == 0" />
              <div v-else class="form-add-container">
                <div
                  class="form-container"
                  v-for="(item, index) in form.flowFormList"
                  :key="index"
                >
                  <div class="sort">
                    <div class="index" header="●">表单（{{ index + 1 }}）</div>
                  </div>
                  <div class="content">
                    <a-row :gutter="20">
                      <!-- 组件类型 -->
                      <a-col :span="6">
                        <a-form-model-item label="组件类型">
                          <a-select
                            :loading="formLoading"
                            v-model="item.elementType"
                            disabled
                          >
                            <a-select-option
                              :value="v.dicValue"
                              v-for="v in formSource"
                              :key="v.dicValue"
                            >
                              {{ v.dicDesc }}
                            </a-select-option>
                          </a-select>
                        </a-form-model-item>
                      </a-col>
                      <!-- 元素名称 -->
                      <a-col :span="6">
                        <a-form-model-item label="元素名称">
                          <a-input v-model="item.elementName" disabled />
                        </a-form-model-item>
                      </a-col>
                      <!-- 是否必填 -->
                      <a-col :span="6">
                        <a-form-model-item label="是否必填">
                          <a-select v-model="item.elementRequired" disabled>
                            <a-select-option value="0"> 必填 </a-select-option>
                            <a-select-option value="1">
                              非必填
                            </a-select-option>
                          </a-select>
                        </a-form-model-item>
                      </a-col>
                      <!-- 编辑时能否修改 -->
                      <a-col :span="6">
                        <a-form-model-item label="编辑时能否修改">
                          <a-radio-group v-model="item.isEditable" disabled>
                            <a-radio :value="0"> 能 </a-radio>
                            <a-radio :value="1"> 否 </a-radio>
                          </a-radio-group>
                        </a-form-model-item>
                      </a-col>
                      <!-- 上传最大数量 -->
                      <a-col
                        :span="6"
                        v-if="
                          item.elementType == 3 ||
                          item.elementType == 4 ||
                          item.elementType == 5
                        "
                      >
                        <a-form-model-item label="上传最大数量">
                          <a-input v-model="item.maxLength" disabled />
                        </a-form-model-item>
                      </a-col>
                      <template
                        v-if="item.elementType == 1 || item.elementType == 2"
                      >
                        <!-- 字段类型 -->
                        <a-col :span="6">
                          <a-form-model-item label="字段类型">
                            <a-select v-model="item.fieldContentType" disabled>
                              <a-select-option value="number">
                                数字
                              </a-select-option>
                              <a-select-option value="text">
                                文本
                              </a-select-option>
                            </a-select>
                          </a-form-model-item>
                        </a-col>
                        <!-- 字段最大长度 -->
                        <a-col :span="6">
                          <a-form-model-item label="字段最大长度">
                            <a-input v-model="item.maxLength" disabled />
                          </a-form-model-item>
                        </a-col>
                      </template>
                      <template
                        v-if="
                          item.elementType == 1 ||
                          item.elementType == 2 ||
                          item.elementType == 7
                        "
                      >
                        <!-- 提示文字 -->
                        <a-col :span="12">
                          <a-form-model-item label="提示文字">
                            <a-input v-model="item.placeHolder" disabled />
                          </a-form-model-item>
                        </a-col>
                        <!-- 字段单位 -->
                        <a-col :span="6">
                          <a-form-model-item label="字段单位">
                            <a-input v-model="item.fieldUnit" disabled />
                          </a-form-model-item>
                        </a-col>
                        <!-- 是否需要默认值 -->
                        <a-col :span="6">
                          <a-form-model-item label="是否需要默认值">
                            <a-radio-group v-model="item.isDefalut" disabled>
                              <a-radio :value="1"> 是 </a-radio>
                              <a-radio :value="0"> 否 </a-radio>
                            </a-radio-group>
                          </a-form-model-item>
                        </a-col>
                        <!-- 默认值 -->
                        <a-col :span="6" v-if="item.isDefalut == '1'">
                          <a-form-model-item label="默认值">
                            <a-input v-model="item.defalutValue" disabled />
                          </a-form-model-item>
                        </a-col>
                      </template>
                      <!-- 下拉框数据列表 -->
                      <a-col :span="24" v-if="item.elementType == 7">
                        <a-form-model-item label="下拉框数据列表">
                          <a-row :gutter="20">
                            <a-col
                              :span="6"
                              v-for="(v, i) in item.selectDataSource"
                              :key="i + 's'"
                            >
                              <a-row :gutter="[10, 10]">
                                <a-col :span="24">
                                  <a-input v-model="v.label" disabled />
                                </a-col>
                              </a-row>
                            </a-col>
                          </a-row>
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
            </a-collapse-panel>
          </a-collapse>
          <div class="user-config-container">
            <div class="config-title" header="人员配置信息"></div>
            <div class="config-container">
              <a-row :gutter="0">
                <a-col :span="24">
                  <!-- 已选人员 -->
                  <a-form-model-item label="已选人员">
                    <a-empty v-if="form.wworkflowUsers.length == 0" />
                    <span
                      class="users"
                      v-for="(item, index) in form.wworkflowUsers"
                      :key="index"
                    >
                      {{ item.approveUser }}
                    </span>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-form-model>
      </div>
    </div>
  </custom-modal-page>
</template>

<script>
import {
  getNodeDetail,
  getFormList,
} from "@/api/user-center/flowPathConfig.js";
export default {
  data() {
    return {
      activeKey: ["1", "2", "3"],
      form: {
        //项目名称
        proName: "",
        //配置功能
        config: "",
        //标段名称
        orgName: "",
        //节点名称
        name: "",
        //前一个节点
        prevnodeDesc: "",
        //后一个节点
        nextnodeDesc: "",
        //打回节点
        backnodeDesc: "",
        //节点类型
        nodetypeDesc: "",
        //节点顺序
        sort: "",
        //备注
        remark: "",
        //表单元素
        flowFormList: [
          {
            //组件类型
            elementType: "",
            //元素名称
            elementName: "",
            //是否必填
            elementRequired: "",
            //提示文字
            placeHolder: "",
            //字段内容类型
            fieldContentType: "",
            //字段最大长度
            maxLength: "",
            //字段单位
            fieldUnit: "",
            //否需要默认值 0否 1是
            isDefalut: "",
            //默认值(若是下拉框则为下拉框的value)
            defalutValue: "",
            //下拉框数据列表
            selectDataSource: [],
            //编辑时能否修改 0能 1否
            isEditable: "",
          },
        ],
        //已选人员
        wworkflowUsers: [],
      },
      loading: false,
      //表单下拉框
      formSource: [],
      formLoading: false,
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
    tenantName: {
      type: Object,
      default: () => {
        return {};
      },
    },
    blockName: {
      type: Object,
      default: () => {
        return {};
      },
    },
    configName: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getFormList();
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //查询表单-下拉框
    getFormList() {
      this.formLoading = true;
      return new Promise((resolve, reject) => {
        getFormList()
          .then((res) => {
            this.formSource = res?.data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.formSource = [];
            reject();
          })
          .finally((_) => {
            this.formLoading = false;
          });
      });
    },
    //详情
    getDetail() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let id = this.id,
          tenantName = this.tenantName,
          configName = this.configName,
          blockName = this.blockName;
        getNodeDetail({ id })
          .then((res) => {
            let {
              data: { result },
            } = res;
            let flow = result?.flowFormList || [];
            this.form = {
              //项目名称
              proName: tenantName?.label || "",
              //配置功能
              config: configName?.label || "",
              //标段名称
              orgName: blockName?.label || "",
              //节点名称
              name: result.name,
              //前一个节点
              prevnodeDesc: result.prevnodeDesc,
              //后一个节点
              nextnodeDesc: result.nextnodeDesc,
              //打回节点
              backnodeDesc: result.backnodeDesc,
              //节点类型
              nodetypeDesc: result.nodetypeDesc,
              //节点顺序
              sort: result.sort,
              //备注
              remark: result.remark,
              //已选人员
              wworkflowUsers: result?.wworkflowUsers || [],
              //表单元素
              flowFormList: [],
            };
            flow.forEach((item) => {
              this.form.flowFormList.push({
                //组件类型
                elementType: item.elementType
                  ? Number(item.elementType)
                  : undefined,
                //元素名称
                elementName: item.elementName,
                //是否必填
                elementRequired: item.elementRequired
                  ? item.elementRequired
                  : undefined,
                //提示文字
                placeHolder: item.placeHolder,
                //字段内容类型
                fieldContentType: item.fieldContentType
                  ? item.fieldContentType
                  : undefined,
                //字段最大长度
                maxLength: item.maxLength,
                //字段单位
                fieldUnit: item.fieldUnit,
                //否需要默认值 0否 1是
                isDefalut: item.isDefalut,
                //默认值(若是下拉框则为下拉框的value)
                defalutValue: item.defalutValue,
                //下拉框数据列表
                selectDataSource: item.selectDatas
                  ? JSON.parse(item.selectDatas)
                  : [{ value: 1, label: "" }],
                //编辑时能否修改 0能 1否
                isEditable: item.isEditable,
              });
            });
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },
    //返回
    gotoBack() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
.flowPath-config-detail-container {
  height: 100%;
  padding: 10px 0 10px 10px;
  .flex();
  flex-direction: column;
  .header {
    padding: 11px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f3f4f6;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
    .back-button {
      color: var(--primary-color);
      background: #f1f2f7 !important;
      border: none;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    .flex();
    flex-direction: column;
    /deep/.ant-collapse {
      border-radius: 0;
      border: none;
      background: #fff;
      .ant-collapse-item {
        display: flex;
        flex-direction: column;
        position: relative;
        border: none;
        border-bottom: 1px solid #e8ebf0;
        &::before {
          position: absolute;
          left: 30px;
          top: 20px;
          content: attr(title);
          font-size: 14px;
          color: #525a5d;
        }
        .ant-collapse-content-box {
          padding: 0;
        }
        .ant-collapse-header {
          padding: 0;
          margin-left: auto;
          margin-right: 30px;
          border-radius: 0;
          height: 60px;
          .flex();
          align-items: center;
          .collapse-custom-header {
            color: var(--primary-color);
            .flex();
            .icon {
              transform: scale(0.75);
              margin-left: 4px;
              transition: 0.3s;
              &.active {
                transform: scale(0.75) rotate(180deg);
              }
            }
          }
        }
        .ant-collapse-content {
          border: none;
        }
      }
    }
    /deep/.ant-form-item {
      .flex();
      .ant-form-item-label {
        width: 130px;
        flex-shrink: 0;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        textarea {
          height: 80px;
        }
        .ant-calendar-picker {
          width: 100%;
        }
      }
    }
    .node-container {
      padding: 0 80px 10px 20px;
    }
    //表单添加
    .form-add-container {
      .flex();
      flex-direction: column;
      .form-container {
        box-sizing: border-box;
        padding: 0 30px 10px 30px;
        .sort {
          .flex();
          justify-content: space-between;
          align-items: center;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: var(--primary-color);
          .index {
            font-size: 16px;
            &::before {
              content: attr(header);
              margin-right: 10px;
            }
          }
          .delete {
            cursor: pointer;
            font-size: 14px;
          }
        }
        .content {
          background: #f6f9ff;
          box-sizing: border-box;
          padding: 20px 50px 0 20px;
          margin: 14px 0;
          /deep/.ant-form-item {
            .ant-form-item-label {
              width: 120px;
            }
          }
        }
      }
    }
    //人员配置信息
    .user-config-container {
      .flex();
      flex-direction: column;
      .config-title {
        margin: 20px 30px;
        &::before {
          content: attr(header);
          font-size: 14px;
          color: #525a5d;
        }
      }
      .config-container {
        box-sizing: border-box;
        padding: 0 80px 10px 20px;
        .users {
          width: 86px;
          height: 32px;
          background: #f1f2f7;
          border-radius: 2px;
          display: inline-block;
          text-align: center;
          line-height: 32px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: var(--primary-color);
          margin-right: 10px;
        }
      }
    }
    /deep/.ant-empty {
      margin: 20px 8px 60px 8px;
    }
    /deep/.ant-radio-disabled .ant-radio-inner::after {
      background-color: var(--primary-color);
    }
    /deep/.ant-radio-disabled + span {
      color: #000000;
    }
  }
}
</style>
